<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul id="city">
    <li id="bj">北京</li>
    <li id="sh">上海</li>
    <li id="sz">深圳</li>
    <li id="gz">广州</li>
</ul>

<hr>
<!-- 目标1 在城市列表的最后添加一个子标签  <li id="cs">长沙</li>  -->
<button onclick="addCs()">增加长沙</button>
<!-- 目标2 在城市列表的深圳前添加一个子标签  <li id="cs">长沙</li>  -->
<button onclick="addCsBeforeSz()">在深圳前插入长沙</button>
<!-- 目标3  将城市列表的深圳替换为  <li id="cs">长沙</li>  -->
<button onclick="replaceSz()">替换深圳</button>
<!-- 目标4  将城市列表删除深圳  -->
<button onclick="removeSz()">删除深圳</button>
<!-- 目标5  清空城市列表  -->
<button onclick="clearCity()">清空</button>
<script>
    function addCs(){
        var htmlliElement = document.createElement("li");
        htmlliElement.innerText = "长沙";
        htmlliElement.id = "cs";
        //得到你要新增对应位置的元素
        var elementById = document.getElementById("city");
        //添加进元素当中
        elementById.append(htmlliElement)
    }
    function addCsBeforeSz(){
        var htmlliElement = document.createElement("li");
        htmlliElement.innerText = "长沙";
        htmlliElement.id = "cs";
        //得到你要新增对应位置的元素
        var elementById = document.getElementById("city");
        var elementById1 = document.getElementById("sz");
        elementById.insertBefore(htmlliElement,elementById1)
    }
    function replaceSz(){
        var htmlliElement = document.createElement("li");
        htmlliElement.innerText = "长沙";
        htmlliElement.id = "cs";
        //得到你要新增对应位置的元素
        var elementById = document.getElementById("city");
        var elementById1 = document.getElementById("sz");
        elementById.replaceChild(htmlliElement,elementById1)
    }

    function removeSz(){
        //得到你要删除对应位置的元素
        var elementById1 = document.getElementById("sz");
        elementById1.remove()
    }
    function clearCity(){
        //得到你要删除对应位置的元素
        var elementById = document.getElementById("city");
        elementById.innerText=""
    }
</script>
</body>
</html>